The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> IE display problems with dropdown menu
relic180
post Oct 8 2009, 09:01 AM
Post #1


Newbie
*

Group: Members
Posts: 15
Joined: 6-June 09
Member No.: 8,818



I'm trying to update my main navigation bar for my site into a something a bit more useful and clean. I've gotten it to work pretty much exactly as I want to in FF and Opera, but of course it's displaying very wrong in IE.

I thought I had found the code needed to fix IE, but I've either used it incorrectly, or it's just not the right bit of code.

Here's a page with the navbar live:
http://www.skullcrow.com/community_upload.php

Here's the css being used:
CODE
/* horizontal drop down navbar - basic formatting */
#centering_wrap {width:100%; position:relative;}
#menu {margin:0 auto;width: 955px;font: bold 11px/16px arial, helvetica, sans-serif;color:#666;} /* Main width and default font properties */
#menu ul {list-style: none;margin: 0;padding: 0;float: left; line-height:42px;} /* Main format for top categories */
#menu ul ul{ position:relative; top:35px; left:5%; width: 90%;} /* child element widths */

#menu ul li{ background-position:bottom left;} /* set nav bg position */
#menu ul li:hover{ background-position:top left;} /* set nav bg position hover position */

/* Positioning popouts (2nd level only) */
#menu li {position: relative;} /* make "ABSOLUTE" work correctly */
#menu ul ul {position: absolute; z-index: 500;} /* prevent menu from "pushing" contents down */
#menu ul ul ul {position: absolute; top: 0; left: 100%;} /* move child elements to the side */

/* Hover behavior */
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

/* Additional text formatting */
#menu a {display: block;width: 100%;height: 100%;}

#menu ul ul li {
font: bold 11px/16px arial, helvetica, sans-serif;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #ccc #323E6B #456594 #323E6B;
margin: 0;
padding: 3px 4px;
background: #2B3344;
}
#menu ul ul a {color: #CCC;text-decoration: none;}

#menu ul ul a:hover {color: #FFF;background:#06F;}


...and here's the html from the menubar (which is contained in a separate php.includes, if that matters at all):
CODE
<div id="centering_wrap">
<div id="menu">

<ul style="width:195px;">
  <li style="background-image:url(../images/nav_com_home.png);"><a href="http://www.skullcrow.com/" alt="Home"> </a>
    <ul>
      <li><a href="http://www.skullcrow.com/">Storefront</a></li>
      <li><a href="http://www.skullcrow.com/community_home.php">Community</a></li>
    </ul>
  </li>
</ul>
  
<ul style="width:188px;">
  <li style="background-image:url(../images/nav_com_store.png);"><a href="http://www.skullcrow.com/" alt="Store"> </a>
    <ul>
      <li><a href="http://www.skullcrow.com/">Shirts</a></li>
      <li>Hats</li>
      <li>Stickers</li>
      <li>Misc Stuff</li>
    </ul>
  </li>
</ul>

<ul style="width:188px;">
  <li style="background-image:url(../images/nav_com_community.png);"><a href="http://www.skullcrow.com/community_home.php" alt="Community"> </a>
    <ul>
      <li><a href="http://www.skullcrow.com/forum">Forum</a></li>
      <li><a href="http://www.skullcrow.com/community_upload.php">Upload Photos</a></li>
      <li><a href="http://www.skullcrow.com/community_designers.php">Submit Shirt Designs</a></li>
      <li><a href="http://www.skullcrow.com/skullcrow_blog">SkullCrow Blog</a></li>
    </ul>
  </li>
</ul>

<ul style="width:188px;">
  <li style="background-image:url(../images/nav_com_help.png);"><a href="http://www.skullcrow.com/help.php" alt="Help"> </a>
    <ul>
      <li><a href="http://www.skullcrow.com/help.php">Contact Us</a></li>
      <li><a href="http://www.skullcrow.com/forum/faq.php">FAQ</a></li>
      <li><a href="http://www.skullcrow.com/aboutus.php">About Us</a></li>
    </ul>
  </li>
</ul>

<ul style="width:196px;">
  <li style="background-image:url(../images/nav_com_otherstuff.png);"><a href="#" alt="Other Stuff"> </a></li>
</ul>

</div>
</div>


...and finally, here's the small snippet of code I used up in the header of the main php file that I thought was suppose to fix the display issue but didn't:
CODE
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(css/csshover3.htc);
font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->


That last bit is contained at the very of the header, and is the very last item before the </head> tag. In addition to the other 'adjustments', it's also suppose to be including the csshover3.htc file that I thought was suppose to fix a lot of display problems. The site I got that file from is here: http://www.xs4all.nl/~peterned/csshover.html

Whatever help is always very appreciated. I'm still sort of a css newb, although I think I'm starting to understand more, but IE is a *beep* and I think most web developers would probably agree.

Thanks again.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
relic180
post Oct 9 2009, 09:22 AM
Post #2


Newbie
*

Group: Members
Posts: 15
Joined: 6-June 09
Member No.: 8,818



Ok, so I was able to fix most of the problem by making the following changes:

CODE
#menu ul li{ height:42px; background-position:bottom left;} /* set nav bg position */
#menu ul li:hover{ background-position:top left;} /* set nav bg position hover position */
#menu ul li li{ height:auto;}


The width of the dropdowns are still not showing up correctly in IE and the font size of the links in the dropdown are showing up smaller than they're suppose to (Although non-link text seems to size correctly). Any help with these 2 things?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 2nd May 2024 - 08:47 AM